<template>
    <div class="seller" ref="seller">
        <div class="seller-content">
            <div class="overview">
                <h1 class="title">{{ seller.name }}</h1>
                <div class="desc border-1px">
                    <star :size="36" :score="seller.score"></star>
                    <span class="text">({{ seller.ratingCount }})</span>
                    <span class="text">月售{{ seller.sellCount }}单</span>
                </div>
                <ul class="remark">
                    <li class="block">
                        <h2>起送价</h2>
                        <div class="content">
                            <span>{{ seller.minPrice }}</span>
                            <span class="stress">元</span>
                        </div>
                    </li>
                    <li class="block">
                        <h2>商家配送</h2>
                        <div class="content">
                            <span>{{ seller.deliveryPrice }}</span>
                            <span class="stress">元</span>
                        </div>
                    </li>
                    <li class="block">
                        <h2>平均配送</h2>
                        <div class="content">
                            <span>{{ seller.deliveryTime }}</span>
                            <span class="stress">分钟</span>
                        </div>
                    </li>
                </ul>
                <div class="favorite" @click="toggleFavorite()">
                    <span class="icon-favorite" :class="{'active':favorite}"></span>
                    <span class="text">{{favoriteText}}</span>
                </div>
                <split></split>
                <div class="bulletin">
                    <h1 class="title">公告与活动</h1>
                    <div class="content-wrapper">
                        <p class="content">{{ seller.bulletin }}</p>
                    </div>
                </div>
                <ul v-if="seller.supports" class="supports">
                    <li class="support-item" v-for="(item, index) in seller.supports">
                        <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                        <span class="text">{{ seller.supports[index].description }}</span>
                    </li>
                </ul>
                <split></split>
            </div>
            <div class="pics">
                <h1 class="title">商家实景</h1>
                <div class="pic-wrapper" ref="picWrapper">
                    <ul class="pic-list" ref="pic_Wrapper">
                        <li class="pic-item" v-for="pic in seller.pics"><img :src="pic" width="120" height="90" /></li>
                    </ul>
                </div>
            </div>
            <split></split>
            <div class="info">
                <h1 class="title border-1px">商家信息</h1>
                <ul>
                    <li class="info-item" v-for="info in seller.infos">{{info}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import star from '../star/star.vue';
import split from '../split/split.vue';
import BScroll from 'better-scroll';
import {saveToLocal,loadFromLocal} from '../../common/js/store.js';
export default {
  props:{
    seller:{
      type:Object
    }
  },
  data(){
      return{
          favorite:(() => {
             return loadFromLocal(this.seller.id,'favorite','false') 
          })()
      }
  },
  computed:{
      favoriteText(){
          return this.favorite ? '已收藏' : '未收藏';
      }
  },
  created() {
      this.classMap = ['decrease','discount','special','invoice','guarantee'];
      this.$nextTick(() => {
        if(!this.scorll){
          this.scorll = new BScroll(this.$refs.seller,{
            click:true
          });
        }else{
            this.scorll.refresh();
        }       
        this._initPics();
      }); 
      
  },
  methods:{
    _initPics(){       
        let count_pic = 0;
        if(this.seller.pics){
            count_pic = this.seller.pics.length;
        }      
        let width = 126*count_pic;
        this.$refs.pic_Wrapper.style.width = width+"px";
        this.$nextTick(() => {              
          if(!this.picscorll){
            this.picscorll = new BScroll(this.$refs.picWrapper,{
               startX: 0,
               click: true,
               scrollX: true,
               // 忽略竖直方向的滚动
               scrollY: false,
               eventPassthrough: "vertical"
            });
          }else{
              this.picscorll.refresh();
          }
        });
    },
    toggleFavorite(){
        this.favorite = !this.favorite;        
        saveToLocal(this.seller.id,'favorite',this.favorite);
    }
  },
  components:{
    star,
    split
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'

.seller
    position absolute
    top 174px
    bottom 0
    left 0
    width 100%
    overflow hidden
    .overview
        padding 18px
        .title
            margin-bottom 8px
            line-height 14px
            color rgb(7, 17, 27)
            font-size 14px
        .desc
            padding-bottom 18px
            line-height 18px
            border-1px(rgba(7, 17, 27, 0.1))
            font-size 0
            .star
                display inline-block
                margin-right 8px
                vertical-align top
            .text
                display inline-block
                margin-right 12px
                vertical-align top
                font-size 10px
        .remark
            display flex
            padding 18px 0
            .block
                flex 1
                display inline-block
                text-align center
                &:nth-child(2)
                    border-left 1px solid rgba(7, 17, 27, 0.1)
                    border-right 1px solid rgba(7, 17, 27, 0.1)
                h2
                    line-height 20px
                    font-size 20px
                    color rgb(147, 153, 159)
                .content
                    margin-top 8px
                    line-height 24px
                    font-size 24px
                    color rgb(7, 17, 27)
                    .stress
                        color rgba(7, 17, 27, 0.3)
                        font-size 10px
        .favorite
            position absolute
            width 50px
            right 18px
            top 11px
            text-align center
            .icon-favorite
                display block
                margin-bottom 4px 
                line-height 24px
                font-size 24px
                color #d4d6d9
                &.active
                    color rgb(240,20,20)
            .text
                line-height 10px
                font-size 14px 
                color rgb(77,80,93)
    .bulletin
        padding 18px 18px 0 18px
        .title
            margin-bottom 8px
            line-height 14px
            color rgb(7, 17, 27)
            font-size 14px
        .content-wrapper
            padding 0 12px 16px 12px
            border-1px(rgba(7, 17, 27, 0.1))
            .content
                line-height 24px
                font-size 12px
                color rgb(240, 20, 20)
    .supports
        .support-item
            padding 16px 12px
            border-1px(rgba(7, 17, 27, 0.1))
            font-size 0
            &:last-child
                border-none()
        .icon
            display inline-block
            width 18px
            height 18px
            vertical-align top
            margin-right 6px
            background-size 16px 16px
            background-repeat no-repeat
            &.decrease
                bg-image('decrease_4')
            &.discount
                bg-image('discount_4')
            &.guarantee
                bg-image('guarantee_4')
            &.invoice
                bg-image('invoice_4')
            &.special
                bg-image('special_4')
        .text
            line-height 16px
            font-size 12px
            font-weight 200
            color rgb(7, 17, 27)
    .pics
        padding 18px
        .title
            margin-bottom 12px
            line-height 14px
            color rgb(7, 17, 27)
            font-size 14px
        .pic-wrapper
            width 100%
            overflow hidden
            white-space nowrap
            .pic-list
                font-size 0
                .pic-item
                    display inline-block
                    margin-right 6px
                    width 120px
                    height 90px
                    &:last-child
                        margin 0
    .info
        padding 18px 18px 0 18px
        .title
            padding-bottom 12px
            line-height 14px
            border-1px(rgba(7,17,27,0.1))
            color rgb(7,17,27)
            font-size 14px
        .info-item
            padding 16px 12px
            line-height 14px
            border-1px(rgba(7,17,27,0.1))
            font-size 12px
        
</style>
